<template>
  <div id="userLayout" class="user-layout-wrapper">
    <div class="container">
      <div class="top">
        <div class="desc">
          <img class="logo_login" src="@/assets/imgs/logo_login.png" alt="" />
        </div>
        <div class="header">
          <router-link to="/">
            <span class="title">Itool-Cloud-Client</span>
          </router-link>
        </div>
      </div>
      <div class="main">
        <a-form
          :model="loginForm"
          ref="loginForm"
          @keyup.enter.native="submitForm"
        >
          <a-form-item prop="username">
            <a-input placeholder="请输入用户名" v-model="loginForm.username">
              <a-icon slot="suffix" type="user"></a-icon>
              ></a-input
            >
          </a-form-item>
          <a-form-item prop="password">
            <a-input
              :type="lock === 'lock' ? 'password' : 'text'"
              placeholder="请输入密码"
              v-model="loginForm.password"
            >
              <a-icon :type="lock" @click="changeLock" slot="suffix"></a-icon>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="submitForm" block>登 录</a-button>
          </a-form-item>
        </a-form>
      </div>

      <div class="footer">
        <div class="copyright">Copyright &copy; {{ curYear }} 💖 艺匠数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      curYear: 0,
      lock: "lock",
      loginForm: {
        username: "admin",
        password: "30.3.."
      }
    };
  },
  created() {
    this.curYear = new Date().getFullYear();

    this.$cloud
      .command("iTool Developer GetList")
      .then(res => {
        console.log("Developer GetList", res);
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    ...mapActions("user", ["LoginIn"]),
    submitForm() {
      if (!this.loginForm.username) {
        this.$message.error("请正确填写登录名");
        return;
      }

      if (!this.loginForm.password) {
        this.$message.error("请正确填写登录密码");
        return;
      }

      this.$cloud
        .command("iTool Developer Login", {
          User: this.loginForm.username,
          Password: this.loginForm.password
        })
        .then(res => {
          console.log("Login", res);
          if (res.User) {
            this.LoginIn({
              user: res.User,
              name: res.Name,
              faceImg: res.FaceImg
            });
          } else {
            this.$message.error(res.Name);
            return;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    changeLock() {
      this.lock === "lock" ? (this.lock = "unlock") : (this.lock = "lock");
    }
  }
};
</script>

<style scoped lang="less">
.logo_login {
  width: 100px;
}
#userLayout.user-layout-wrapper {
  height: 100%;
  position: relative;
  &.mobile {
    .container {
      .main {
        max-width: 368px;
        width: 98%;
      }
    }
  }
  .container {
    position: relative;
    overflow: auto;
    width: 100%;
    min-height: 100%;
    background: #f0f2f5 url(~@/assets/svgs/background.svg) no-repeat 50%;
    background-size: 100%;
    padding: 110px 0 144px;
    a {
      text-decoration: none;
    }
    .top {
      text-align: center;
      margin-top: -40px;
      .header {
        height: 44px;
        line-height: 44px;
        margin-bottom: 30px;
        .badge {
          position: absolute;
          display: inline-block;
          line-height: 1;
          vertical-align: middle;
          margin-left: -12px;
          margin-top: -10px;
          opacity: 0.8;
        }
        .logo {
          height: 44px;
          vertical-align: top;
          margin-right: 16px;
          border-style: none;
        }
        .title {
          font-size: 33px;
          color: rgba(0, 0, 0, 0.85);
          font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
          font-weight: 600;
          position: relative;
          top: 2px;
        }
      }
      .desc {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 12px;
      }
    }
    .main {
      min-width: 260px;
      width: 368px;
      margin: 0 auto;
    }
    .footer {
      position: relative;
      width: 100%;
      padding: 0 20px;
      margin: 40px 0 10px;
      text-align: center;
      .links {
        margin-bottom: 8px;
        font-size: 14px;
        width: 330px;
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 40px;
        a {
          color: rgba(0, 0, 0, 0.45);
          transition: all 0.3s;
        }
      }
      .copyright {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        padding-right: 40px;
      }
    }
  }
}
</style>
